<template>
  <div class="mb-10 btm-959595 pb-30">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-if="routerList.prev">{{
        routerList.prev
      }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="routerList.cur">{{
        routerList.cur
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { RouterList } from "@/interface/interface";
import { Message } from "element-ui";
@Component({})
export default class breadCrumb extends Vue {
  protected name!: "breadCrumb";
  protected routerList: RouterList = {
    prev: "",
    cur: ""
  };

  protected created() {
    const meta = this.$route.meta.length;
    try {
      if (meta) {
        this.$route.meta.forEach((val: any) => {
          this.routerList.prev = val.prev;
          this.routerList.cur = val.cur;
        });
      }
    } catch (e) {
      this.$message({
        type: "error",
        message: e
      });
    }
  }

  @Watch("$route")
  watchRoute(to: any, from: any) {
    try {
      if (to.meta.length) {
        to.meta.forEach((val: any) => {
          this.routerList.prev = val.prev;
          this.routerList.cur = val.cur;
        });
      } else {
        //FIXME 点击首页显示的不是首页
        //FIEXME 问题解决 将this.routerList重置
        this.routerList.prev = "";
        this.routerList.cur = "";
      }
    } catch (e) {
      this.$message({
        type: "error",
        message: e
      });
    }
  }
}
</script>

<style lang="scss" scoped></style>
